<template>
  <topbar class="navbar" v-if="show">
    <div class="left" @click="back"></div>

    <div class="center">
      <slot></slot>
    </div>

    <div class="right"></div>
  </topbar>
</template>

<script type="text/ecmascript-6">
  import config from '../../config/config';
  import Topbar from './topbar.vue';

  export default {
    components: {
      Topbar
    },
    props: {
      title: String,
      forbidBack: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      back() {
        !this.forbidBack && history.back();

        this.$emit('back');
      }
    },
    data() {
      return {
        show: !config.isWechat
      }
    }
  }
</script>

<style rel="stylesheet/less" lang="less">
  .navbar {
    background-color: #000000;
    color: #ffffff;
    font-size: 18px;

  .left {
    width: 50px;
    height: 100%;
    background: url("../../static/img/return.png") no-repeat 15px center;
    background-size: 12px 19px;
  }

  .center {
    flex: 1;
    text-align: center;
  }

  .right {
    width: 50px;
  }
  }

  .navbar + div {
    padding-top: 50px !important;
  }
</style>
